<template>
    <div class="card">
        <div class="card-header text-center">
            <h3>会员管理</h3>
        </div>
        <div class="card-body">
            <el-table :data="vipList" style="width: 100%" height="540" @sort-change="sortChange">
                <el-table-column label="序号">
                    <template #default="scope">
                        {{ (current_pageVip - 1) * pageSizeVip + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="会员制名称" sortable="costom" />
                <el-table-column prop="stationNum" label="授权工位数量" sortable="costom" :formatter="numFormatter" />
                <el-table-column prop="renderNum" label="普通导出数量" sortable="costom" :formatter="numFormatter" />
                <el-table-column prop="findNum" label="查询次数" sortable="costom" :formatter="numFormatter" />
                <el-table-column prop="watermarkRenderNum" label="水印导出数量" sortable="costom" :formatter="numFormatter" />
                <el-table-column width="200" align="right">
                    <template #header>
                        <el-button type="primary" plain @click="addVipDialog = true">新增</el-button>
                    </template>
                    <template #default="scope">
                        <el-button type="primary" :icon="Edit" circle @click="editVip(scope.row)" />
                        <el-popconfirm width="200" confirm-button-text="确认" cancel-button-text="取消"
                            confirm-button-type="danger" cancel-button-type="info" :hide-after="50" title="确认删除？"
                            @confirm="deleteVip(scope.row.id)">
                            <template #reference>
                                <el-button type="danger" :icon="Delete" circle />
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog v-model="editVipDialog" title="编辑(-1为无限次)" width="30%" @close="handleEditClose">
            <el-form label-position="right" label-width="100px" :model="form" style="max-width: 460px">
                <el-form-item label="编号">
                    <el-input v-model="form.id" disabled />
                </el-form-item>
                <el-form-item label="会员制名称">
                    <el-input v-model="form.name" />
                </el-form-item>
                <el-form-item label="授权工位数量">
                    <el-input type="number" v-model="form.stationNum" />
                </el-form-item>
                <el-form-item label="普通渲染数量">
                    <el-input type="number" v-model="form.renderNum" />
                </el-form-item>
                <el-form-item label="查询次数">
                    <el-input type="number" v-model="form.findNum" />
                </el-form-item>
                <el-form-item label="水印渲染数量">
                    <el-input type="number" v-model="form.watermarkRenderNum" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="editVipDialog = false">取消</el-button>
                    <el-button type="primary" @click="editVipS()">
                        修改
                    </el-button>
                </span>
            </template>
        </el-dialog>
        <div class="card-footer">
            <el-row justify="center">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="totalVip"
                    :current_page="current_pageVip" :page-sizes="[10, 50, 100]" :page-size="pageSizeVip"
                    @current-change="handleVipCurrentChange" @size-change="handleVipSizeChange" />
            </el-row>
        </div>
    </div>
    <el-dialog v-model="addVipDialog" title="新增(-1为无限次)" width="30%">
        <el-form label-position="right" label-width="100px" :model="form" style="max-width: 460px">
            <el-form-item label="会员制名称">
                <el-input v-model="form.name" placeholder="请输入会员制名称" />
            </el-form-item>
            <el-form-item label="授权工位数量">
                <el-input type="number" v-model="form.stationNum" placeholder="请输入授权工位数量" />
            </el-form-item>
            <el-form-item label="普通渲染数量">
                <el-input type="number" v-model="form.renderNum" placeholder="请输入普通渲染数量" />
            </el-form-item>
            <el-form-item label="查询次数">
                <el-input type="number" v-model="form.findNum" placeholder="请输入查询次数" />
            </el-form-item>
            <el-form-item label="水印渲染数量">
                <el-input type="number" v-model="form.watermarkRenderNum" placeholder="请输入水印渲染数量" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addVipDialog = false">取消</el-button>
                <el-button type="primary" @click="addVip()">
                    增加
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import { reactive, ref } from 'vue'
import { postRequest } from '@/utils/http'
import { message } from '@/utils/messageBox'
import { Delete, Edit, Search } from '@element-plus/icons-vue'

export default {

    setup() {
        let form = reactive({
            name: '',
            stationNum: '',
            renderNum: '',
            findNum: '',
            watermarkRenderNum: '',
        })
        let sortByVip = ref("id");
        let descVip = ref(false);
        let totalVip = ref(0);
        let current_pageVip = ref(1);
        let pageSizeVip = ref(10);
        let vipList = ref([]);
        let addVipDialog = ref(false);
        let editVipDialog = ref(false);

        const selectVip = () => {
            postRequest("/vip/select", {
                page: current_pageVip.value,
                size: pageSizeVip.value,
                sortBy: sortByVip.value,
                desc: descVip.value,
            }, function success(resp) {
                if (resp.code == '200') {
                    totalVip.value = resp.data.totalElements;
                    vipList.value = resp.data.content;
                } else {
                    message(resp.msg, 'error');
                }
            }, function error(resp) {
                message(resp.msg, 'error');
            }
            )
        }
        selectVip();
        return {
            form,
            selectVip,
            totalVip,
            vipList,
            current_pageVip,
            sortByVip,
            descVip,
            addVipDialog,
            pageSizeVip,
            Delete,
            editVipDialog,
            Edit,
            Search,
        }
    },
    methods: {
        handleVipSizeChange(size) {
            this.pageSizeVip = size;
            this.selectVip();
        },
        handleVipCurrentChange(currentPage) {
            this.current_pageVip = currentPage;
            this.selectVip();
        },
        addVip() {
            const that = this;
            postRequest("/vip/add", {
                name: that.form.name,
                stationNum: that.form.stationNum,
                renderNum: that.form.renderNum,
                findNum: that.form.findNum,
                watermarkRenderNum: that.form.watermarkRenderNum,
            }, function success(resp) {
                if (resp.code == '200') {
                    message(resp.msg, 'success');
                    that.addVipDialog = false;
                    that.handleEditClose();
                    that.selectVip();
                } else {
                    message(resp.msg, 'warning');
                }
            }, function error() {
                message("添加失败", 'error');
            })
        },
        handleEditClose() {
            this.form.name = "";
            this.form.stationNum = '';
            this.form.renderNum = '';
            this.form.findNum = '';
            this.form.watermarkRenderNum = '';
        },
        editVip(vip) {
            const that = this;
            that.form.id = vip.id;
            that.form.name = vip.name;
            that.form.stationNum = vip.stationNum;
            that.form.renderNum = vip.renderNum;
            that.form.findNum = vip.findNum;
            that.form.watermarkRenderNum = vip.watermarkRenderNum;
            that.editVipDialog = true;
        },
        editVipS() {
            const that = this;
            postRequest("/vip/edit", {
                id: that.form.id,
                name: that.form.name,
                stationNum: that.form.stationNum,
                renderNum: that.form.renderNum,
                findNum: that.form.findNum,
                watermarkRenderNum: that.form.watermarkRenderNum,
            }, function success(resp) {
                if (resp.code == '200') {
                    message('修改成功', 'success');
                    that.editVipDialog = false;
                    that.selectVip();
                } else {
                    message(resp.msg, 'warning');
                }
            }, function error() {
                message('修改失败', 'error');
            })
        },
        deleteVip(id) {
            const that = this;
            postRequest("/vip/delete", {
                id: id,
            }, function success(resp) {
                if (resp.code == '200') {
                    message(resp.msg, 'success');
                    that.selectVip();
                } else {
                    message(resp.msg, 'warning');
                }
            }, function error() {
                message("删除失败", 'error');
            })
        },
        numFormatter(row, col, cellValue) {
            if (cellValue == -1) {
                return "无限次";
            } else {
                return cellValue;
            }
        },
    }
}
</script>